/**
 * 首页部署 菜单VUE组件
 * Created by Arvin on 2017/11/25.
 */
(function (Vue, $) {
    "use strict";
    if (typeof Vue === "undefined") {
        console.error('Vue 未定义！');
        return ;
    }

    // 注册一个VUE组件
    var vueComponentName = 'layout-menu-component';
    Vue.component(vueComponentName, buildVueComponentOptions());

    /**
     * 构造 options
     */
    function buildVueComponentOptions() {
        // 模版内容
        var template = String.prototype.concat.call(
            '<li v-show="model.showMenu" :class="activeSidebarMenuClass(model)">',
            '<a :href="getHref(model)" @click.prevent="openUrl(model, getHref(model))">',
            '<i :class="getMenuClass(model)"></i> <span> {{ model.name }}</span>',
            '<span class="pull-right-container" v-if="isFolder">',
            '<i class="fa fa-angle-left pull-right"></i>' +
            '</span>',
            '</a>',
            '    <ul class="treeview-menu" style="display: block" v-show="open" v-if="isFolder">',
            '        <layout-menu-component',
            '                v-for="model in model.children" :key="model.name"',
            '                :model="model">',
            '        </layout-menu-component>',
            '    </ul>',
            '</li>'
        );

        var options = {
            template: template,
            props: {
                model: Object
            },
            data: function() {
                return {
                    open: false
                }
            },
            computed: {
                isFolder: function () {
                    return this.model.children &&
                        this.model.children.length
                }
            },
            methods: {
                activeSidebarMenuClass: function(item) {
                    return {
                        'treeview': item.children && item.children.length
                    };
                },
                getHref: function(item) {
                    return item.children && item.children.length ? '#' : item.mainUrl;
                },
                getMenuClass: function(model) {
                    var isFolder = model.children && model.children.length;
                    if (isFolder) {
                        return "fa fa-folder";
                    }
                    return "fa fa-circle-o";
                },
                openUrl: function(model, url) {
                    var isFolder = model.children && model.children.length;
                    if (!isFolder && url && url.indexOf("#") < 0) {
                        loadPage(url);
                    }
                }
            }
        };

        return options;
    }
})(Vue, jQuery);
